<template>
    <div>
        <div class="filter-Nav-container">
                <div class="filter-Nav">
                    <!-- <div v-for="item in FilterList" :key="item.type" @click="getFilterType" :id="item.type" ref="Filter" :style="{color:'red'}">{{item.name}}</div> -->
                     <div :class="isActive===1? 'active':''" @click="getFilterType(1,$event)" id="integrated"> 综合榜</div>
                     <div :class="isActive===2? 'active':''" @click="getFilterType(2,$event)" id="popTraining"> 热练榜</div>
                     <div :class="isActive===3? 'active':''" @click="getFilterType(3,$event)" id="newcomer"> 新锐榜</div>
                     <div :class="isActive===4? 'active':''" @click="getFilterType(4,$event)" id="lastest"> 最新</div>
                </div>
                <div class="filtrate-button"  @click="isfiltercontainer? isfiltercontainer=false : isfiltercontainer=true">筛选</div>
          </div>
          <!-- 筛选舞蹈栏 -->
          <div class="filter-container" v-if="isfiltercontainer" v-for="GeneralFilter in props.GeneralFilterTermList" :key="GeneralFilter.name">
                <div class="filter-content">
                    <div class="filter-title">{{GeneralFilter.label}}</div>
                    <ul class="filter-tag">
                        <li class="filter-item"  
                        :class="avocationNames.includes(item.name)? 'active':'' || confilterValue.includes(item.id)? 'active':'' "
                        v-for="(item,index) in GeneralFilter.choises" 
                        :key="item.id" 
                        @click="screenData(GeneralFilter,item,$event)"
                        >{{item.name}}</li>
                    </ul>
                </div>
          </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from 'element-plus';

export default defineComponent({
    name: "FilterNav",
});
</script>

<script setup lang="ts">
import {useScreeningStore} from '@/stores/screening'

import { FilterTermListItemType,RequestSiftingHot } from '@/api/Resource';
import {ref} from 'vue' 


let isfiltercontainer = ref<boolean>(false)//筛选栏切换按钮

let isActive = ref<number>(1)

let isflActive =ref<boolean>(false)
    
        //接收父组件传值
const props = defineProps<{
    GeneralFilterTermList:FilterTermListItemType[]
}>()

const getFilterType=async(num:number,e:any)=>{
    isActive.value = num
    console.log(e.target.id);
        
    //发请求（获取的id可以用来发送榜单请求）
    const re = await RequestSiftingHot(e.target.id)
    // console.log(re,'11');
}
let avocationNames = ref<any>([])
let filterValue = ref<any>([])
let confilterValue = ref<any>([])
let filterCode =ref<string>('')

let filterInfo = ref<any>([])
//筛选发请求
const screenData=(General:any,item:any,e:Event)=>{
    console.log(item,'11');
    if(General.label==="兴趣技能"){
        if (filterValue.value.length<3) {
            // isflActive.value = index
            console.log(1);
            
            console.log(avocationNames.value.includes(item.name));
            
            if(avocationNames.value.includes(item.name)){
                avocationNames.value = avocationNames.value.filter((item2: any)=> item2 !== item.name)
                console.log(2);
                filterValue.value = filterValue.value.filter((item3: any)=> item3 != item.id)
            }else{
                avocationNames.value.push(item.name)
                filterValue.value.push(item.id)
                console.log(3);
            }
        }else{
            avocationNames.value = avocationNames.value.filter((item2: any)=> item2 !== item.name)
            filterValue.value = filterValue.value.filter((item3: any)=> item3 !== item.id)
            console.log(4);
        }
        
        // if(filterInfo.value === ){
        //     filterInfo.value.push({avocationNames:avocationNames.value,filterCode:'avocation',filterValue:filterValue.value})
        // }
    }else{
        console.log(2);
        if (confilterValue.value.length<=3) {
            if (confilterValue.value.includes(item.id)) {
                confilterValue.value = confilterValue.value.filter((item4: any)=>item4 !== item.id)
            }else{
                confilterValue.value.push(item.id)
            }
        }
        filterInfo.value.push({avocationNames:avocationNames.value,filterCode:'contentType',filterValue:confilterValue.value})
    }


}

</script>

<style lang="scss" scoped>
     // 导航下的标签页
  .filter-Nav-container{
            width: 1200px;
            height: 69px;
            display: flex;
            align-items: center;
            .filter-Nav{
                margin-left: 25px;
                width: 1095px;
                height: 69px;
                line-height: 69px;
                font-size: 16px;
                display: flex;
                .active{
                    color: rgb(251, 48, 48);
                }
                div{
                    width: 60px;
                    height: 69px;
                    line-height: 69px;
                    margin-right:60px;
                    cursor:pointer;
                    &:hover{
                        color: red;
                    }
                }
            }
            .filtrate-button{
                width: 83px;
                height: 36px;
                border-radius:18px ;
                background-color: #e9ecec;
                font-size: 16px;
                line-height: 36px;
                text-align: center;
                cursor:pointer;
                
            }
        }
  .filter-container{
            width: 1200px;
            padding: 10px 30px;
            .filter-content{
                width: 1140px;
                height: 80px;
                display: flex;
                .filter-title{
                    width: 95px;
                    font-size: 16px;
                    height: 30px;
                    line-height: 30px;
                }
                .filter-tag{
                        font-size: 14px;
                        width: 1045px;
                        height: 80px;
                        display: flex;
                        flex-wrap: wrap;
                        .filter-item{
                            padding:0 10px;
                            font-size: 14px;
                            height: 30px;
                            line-height: 30px;
                            margin: 0 24px 0 0;
                            // color: rgb(251, 48, 48);
                            cursor: pointer;
                        }
                        .active{
                                
                                background-color: #f93684;
                                border-radius: 5px;
                                color: #fff;
                            }
                }
            }
        }
</style>